<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业满意度数据看板</title>
    <style>
        html,body{margin:0;height:100%;background:#ffffff;display:flex;justify-content:center;align-items:center;font-family:"Microsoft YaHei",sans-serif;}

        /* 整体容器 */
        .board{
            position:relative;
            width:1200px;
            height:800px;
            transform:scale(.5);
            transform-origin:center;
        }

        /* ① 标题区：1.png + 现场生成的「企业满意度」文字 */
        .header{
            position:absolute;
            left:48px;
            top:48px;
            display:flex;
            align-items:center;
            gap:12px;   /* 横杠与文字间隔 */
            z-index:10;
            background: linear-gradient(90deg, #0B4665 0%, rgb(58, 183, 219) 70%, #FFFFFF 100%);
            padding: 8px 16px;
            border-radius: 4px;
        }
        /* 彩色横杠图 */
        .bar-icon{height:30px;background-color:transparent;}
        /* 现场生成文字容器 */
        .title-text{
            font-size:28px;
            font-weight:bold;
            color:#81D9E6;
            font-family:"Microsoft YaHei",sans-serif;
        }

        /* ② 雷达底图：material1.png 直接放下边 */
        .radar{
            position:absolute;
            left:48px;
            top:135px;   /* 标题底留一点间距 */
            width:430px;
            height:224px;
            z-index:3;
        }

        /* ③ 右上角关闭 5 连 */
        .close-group{
            position:absolute;
            left:400px;
            top:48px;
            display:flex;
            gap:4px;
            z-index:4;
            cursor:pointer;
        }
        .close-group img{width:16px;height:30px;}

        /* 底部线条和4.png容器 */
        .bottom-elements {
            position: absolute;
            left: 48px;
            top: 1029px; /* 与雷达图保持205px的垂直间距 */
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 5;
            width: 960px;
        }

        /* 线条样式 */
        .line-image {
            height: 12px;
        }

        /* 线条1特殊样式 */
        .line1-special {
            width: 456px;
            height: 1px;
            display: block;
            z-index: 10;
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(129, 217, 230, 1);
            box-sizing: border-box;
        }

        /* 线条2特殊样式 */
        .line2-special {
            width: 456px;
            height: 1px;
            display: block;
            z-index: 5;
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(129, 217, 230, 1);
            box-sizing: border-box;
        }

        /* 调整底部元素容器 */
        .line-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 960px;
            gap: 10px;
        }

        /* 4.png样式 */
        .four-image {
            height: 24px;
            width: 24px;
            position: relative;
            z-index: 20;
        }
    </style>
</head>
<body>
    <div class="board">
        <!-- 标题：3.png 在前，现场文字在后 -->
        <div class="header">
            <img src="3.png" class="bar-icon" alt="color-bar">
            <div class="title-text">政策兑付</div>
        </div>

        <!-- 矩形背景 -->
        <img src="矩形1.png" alt="rectangle-bg" style="position: absolute; left: 48px; top: 106px; width: 459px; height: 263px; z-index: 1;">

        <!-- 雷达底图 -->
        <img src="material4.png" class="radar" alt="radar-bg">

        <!-- 关闭按钮：5个5.png -->
        <div class="close-group" onclick="window.close()">
            <img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png"><img src="5.png">
        </div>

        <!-- 线条2左侧的四个图标（水平排列，更多重叠） -->
        <div style="position: absolute; left: 48px; top: 347px; display: flex; flex-direction: row; gap: 0px; margin: 0; padding: 0; z-index: 6;">
            <img src="4.png" class="four-image" alt="four1" style="margin: 0; padding: 0; display: block;">
              <img src="4.png" class="four-image" alt="four2" style="margin: 0 0 0 -10px; padding: 0; display: block;">
              <img src="4.png" class="four-image" alt="four3" style="margin: 0 0 0 -10px; padding: 0; display: block;">
              <img src="4.png" class="four-image" alt="four4" style="margin: 0 0 0 -10px; padding: 0; display: block;">
        </div>

        <!-- 雷达图下方的线条2 -->
        <img src="线条2.png" class="line2-special" alt="line2" style="position: absolute; left: 140px; top: 355px; width: 361px;">

        <!-- 线条1放在线条2下面，间隔5px -->
        <img src="线条1.png" class="line1-special" alt="line1" style="position: absolute; left: 125px; top: 360px; width: 361px;">

        <!-- 底部元素容器（已移除图标） -->
        <div class="bottom-elements">
            <div class="line-container">
                <!-- 线条1已移至线条2下方 -->
            </div>
        </div>
    </div>

    <!-- 移除echarts脚本 -->
</body>
</html>